<!--
 * @Author: ChunLai
 * @Date: 2023-03-17 11:58:04
 * @LastEditTime: 2025-11-18 15:11:00
 * @Description: 必读列表
 * @FilePath: \01.latest-short-insure\src\views\sign\components\protocols\MustList.vue
-->
<template>
  <div>
    <div
      v-for="(item, index) in lists"
      class="protocol"
      :key="`html-img-${index}`"
      @click="itemClick(index)"
    >
      <div class="notice_img mr6">
        <span class="check_img" v-if="item.isFinish"></span>
      </div>
      <i>本人已逐页阅读并同意</i> <em>{{ getFileName(item.fileName) }}</em>
    </div>
    <!-- 弹出框展示文件 -->
    <van-popup
      v-model="showPop"
      overlay-class="lay1_shark"
      position="bottom"
      :style="{ height: '80%' }"
      sticky
    >
      <van-tabs v-model="activeNav" @change="changetabs">
        <van-tab
          v-for="(item, index) in lists"
          :title="item.fileName"
          :key="`tab_html${index}`"
        >
          <div class="readContent" @scroll="scrollEvent" :ref="'read' + index">
            <template v-if="item.suffixType === 'html'">
              <div v-html="item.fileUrl" class="notice-html"></div>
              <div class="notice-tick" v-if="item.tickContent">
                <van-checkbox
                  v-model="tickCheck"
                  shape="square"
                  checked-color="#ee0a24"
                  icon-size="14px"
                >
                  {{ item.tickContent }}
                </van-checkbox>
              </div>
            </template>
            <div
              class="md_pic"
              v-else-if="item.suffixType === 'img'"
              @click="handlePreview(item.imgs)"
            >
              <img
                v-for="(ele, idx) in item.imgs"
                :key="item.fileName + idx"
                :src="`${ele}?v=${timeVersion}`"
              />
            </div>
          </div>
        </van-tab>
      </van-tabs>
      <div class="footer-button" v-if="lists[activeNav]">
        <template v-if="lists[activeNav].tickContent">
          <div
            class="footer-btn"
            v-if="tickCheck && (scrollFinsish || lists[activeNav].isFinish)"
            @click="handleEvent"
          >
            我已阅读并同意
          </div>
          <div class="footer-btn disabled" v-else>我已阅读并同意</div>
        </template>
        <template v-else>
          <div
            class="footer-btn"
            v-if="scrollFinsish || lists[activeNav].isFinish"
            @click="handleEvent"
          >
            我已阅读并同意
          </div>
          <div class="footer-btn disabled" v-else>{{ btnTxt }}</div>
        </template>
      </div>
    </van-popup>
    <van-image-preview v-model="showPreview" :images="images">
    </van-image-preview>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "MustList",
  data() {
    return {
      showPop: false,
      btnTxt: "请仔细阅读以上文件",
      activeNav: 0,
      scrollFinsish: false,
      timeOut: "",
      tickCheck: false, // 勾选
      showPreview: false,
      images: [],
      timeVersion: new Date().getTime(),
    };
  },
  components: {},
  computed: {
    ...mapGetters({
      lists: "readings/tabLists",
      htmlFinish: "readings/htmlFinish",
      readFinish: "readings/wholeFinish",
    }),
  },
  watch: {
    readFinish(val) {
      if (val == true) {
        this.showPop = false;
      }
    },
  },
  created() {},
  mounted() {},
  methods: {
    getFileName(name) {
      let res = name;
      if (name && name.indexOf("《") == -1) {
        res = `《${name}》`;
      }
      return res;
    },
    itemClick(idx) {
      this.showPop = true;
      this.activeNav = idx;
      this.changetabs();
    },
    handleEvent() {
      if (this.htmlFinish) {
        this.activeNav = 0;
        this.showPop = false;
      } else {
        this.$store.dispatch("readings/setItemFinish", {
          type: "html",
          index: this.lists[this.activeNav].id,
        });
        this.activeNav += 1;
        this.changetabs();
      }
    },
    changetabs() {
      let i = 10;
      this.btnTxt = `请仔细阅读以上文件 ${i}`;
      this.scrollFinsish = false;
      clearInterval(this.timeOut);
      this.timeOut = setInterval(() => {
        i--;
        if (i <= 0) {
          //当时间小于等于0秒的时候让空间可用
          this.scrollFinsish = true;
          clearInterval(this.timeOut);
          this.btnTxt = "请仔细阅读以上文件";
        } else {
          //当时间还不够的时候继续锁定
          this.btnTxt = `请仔细阅读以上文件 ${i}`;
        }
      }, 1000);
    },
    scrollEvent(e) {
      let { offsetHeight, scrollTop, scrollHeight } = e.srcElement;
      if (offsetHeight + scrollTop >= scrollHeight - 50) {
        this.scrollFinsish = true;
        clearInterval(this.timeOut);
      }
    },
    handlePreview(arrs) {
      this.images = arrs;
      this.showPreview = true;
    },
  },
};
</script>

<style lang="less" scoped>
@import "./style.less";
.readContent {
  height: calc(80vh - 100px);
  overflow: auto;
}
.notice-tick {
  padding: 0 14px 30px;
}
.notice-html {
  padding: 5px 14px 10px;
  min-height: 60vh;
}
.md_pic {
  width: 100%;

  img {
    display: block;
    max-width: 100%;
  }
}
.footer-button {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 5px 0;
  background-color: #fff;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;

  .footer-btn {
    width: 80%;
    background-color: #ed9f23;
    color: #ffffff;
    font-size: 16px;
    height: 40px;
    line-height: 40px;
    border-radius: 40px;
    text-align: center;

    &.disabled {
      color: #bfbfbf;
      background-color: #eee;
    }
  }
}
/deep/ .van-tabs--line .van-tabs__wrap {
  position: fixed;
  top: 20%;
  left: 0;
  width: 100%;
}

/deep/ .van-tabs__content {
  padding-top: 50px;
  padding-bottom: 50px;
}
</style>
